<template>
  <el-menu :default-active="$route.name" class="el-menu-vertical-demo" background-color="#3f4d67" text-color="#fff"
    active-text-color="#1dc4e9" :collapse="isCollapse" :unique-opened="true">
    <div class="LogoLine p-10">
      <img src="@/assets/Logo.svg" alt="" />
      <transition name="el-fade-in-linear">
        <div v-show="!isCollapse" class="title">巡航管理后台</div>
      </transition>
    </div>
    <!-- 单项菜单栏 -->
    <el-menu-item v-for="item in aloneItem" :index="item.name" :key="item.path" @click="seleteMenu(item)">
      <i :class="`el-icon-${item.icon}`"></i>
      <span slot="title">{{ item.meta.title }}</span>
    </el-menu-item>
    <!-- 菜单组 -->
    <el-submenu v-for="item in pluralItem" :index="item.lable" :key="item.lable">
      <template slot="title">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.lable }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="subItem in item.childrens" :index="subItem.name" :key="subItem.name"
          @click="seleteMenu(subItem)">{{ subItem.meta.title }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "NavMenu",
  data() {
    return {
    };
  },
  methods: {
    seleteMenu(target) {
      this.$router.push({
        name: target.name,
      });
    },
  },
  computed: {
    ...mapGetters("menuSwitch", ['aloneItem', 'pluralItem']),
    isCollapse() {
      // 控制菜单栏是否折叠的变量
      return this.$store.state.menuSwitch.isCollapse;
    },
  },
};
</script>

<style scoped lang="less">
.LogoLine {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 20px;

  img {
    height: 30px;
    width: 30px;
  }

  .title {
    color: #fff;
    height: 20px;
    font-size: 18px;
    margin-left: 10px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
}

.el-menu {
  height: 100%;
  text-align: left;
  border-right: 0;
  box-shadow: 1px 0 20px 0 #3f4d67;
  background-color: #3f4d67;
}

.is-opened /deep/ .el-submenu__title {
  box-sizing: border-box;
  border-left: 3px solid #1dc4e9;
  background-color: #323e52 !important;

  i {
    color: #1dc4e9;
  }
}
</style>